<template>
  <el-main>
    <el-row>
      <el-col :span="24" style="margin: auto">
        <el-steps :active="1">
          <el-step title="步骤 1" description="加入购物车"></el-step>
          <el-step title="步骤 2" description="生成订单"></el-step>
          <el-step title="步骤 3" description="支付"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <!-- 购物车的表格 -->
      <!-- @监听 勾选表格中当前项时会触发 selection-change 事件，在<el-table>中绑定 handleSelectionChange 方法 -->
      <el-table :data="carts" style="width: 100%;" @selection-change="handleSelectionChange">
        <!-- 复选框 -->
        <el-table-column type="selection" width="55"  align="center"> </el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="name" label="商品名称"  align="center"> </el-table-column> 
        <!-- 商品图片 -->
        <el-table-column prop="img" label="图片"  align="center">
          <template slot-scope="scope">
            <img
              :src="'http://127.0.0.1:3001/images/' + scope.row.img"
              alt=""
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <!-- 商品单价 -->
        <el-table-column prop="price" label="单价"  align="center"> </el-table-column>
        <!-- 商品数量 -->
        <el-table-column prop="num" label="数量"  align="center">
          <!-- template 标签来定义一个插槽，并将其命名为 slot-scope="scope"。这个插槽会被应用到自定义表格的某一列中 -->
          <template slot-scope="scope">
            <!-- scope.row 表示当前行的数据对象，在这里表示每个项目的数据。 -->
            <el-button @click="reduceItem(scope.row)" :disabled="scope.row.num==1">-</el-button>
            {{ scope.row.num }} 
            <el-button @click="addItem(scope.row)">+</el-button>
          </template>
        </el-table-column>
        <!-- 商品金额 -->
        <el-table-column prop="currency" label="金额"  align="center"> 
        <template slot-scope="scope">
            {{scope.row.num*scope.row.price}}元
          </template>  
        </el-table-column> 
        <!-- 操作 -->
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    <el-row>
      购物车总价:￥ {{ total }} &nbsp;
      <el-button type="success" @click="clearing">去结算</el-button>
    </el-row>
  </el-main>
</template>

<script>
import { mapState} from "vuex";
export default {
  data() {
    return {
      multipleSelection:[],
      total:0,
      carts:[],
      cartData:[] //传到结算页的选中的数据
    };
  },
  created(){
    if (this.user && this.user.uid) {
    this.axios.post('/api/carts/cartsBU',{uid:this.user.uid}).then(res=>{
      this.carts=res.data.data;
    }).catch(err=>{
      alert(err.message);
    })}
    else {
    console.error('User or user ID is not available');
  }

  },
  computed: {
    ...mapState("user", ["user"]),
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      let total = 0;
      selection.forEach(item => {
      total += item.num * item.price;
    });
    this.total = total;
  },
    upNum(good){
      this.axios.post('/api/carts/upNum',{cartid:good.cartid,num:good.num}).then(res=>{
      
      }).catch(err=>{
        alert(err.message);
      })
    },
    // 减少商品的数量
    reduceItem(good) {
      good.num--;
      this.upNum(good);
      this.handleSelectionChange(this.multipleSelection);//重新计算总价和选中项的数组
    },
    // 增加商品的数量
    addItem(good) {
      good.num++;
      this.upNum(good);
       this.handleSelectionChange(this.multipleSelection);
    },
    // 删除商品
    deleteItem(good) {
      this.axios.post('/api/carts/del',{cartid:good.cartid}).then(res=>{   //将good.cartid作为请求体中的cartid参数传递
        alert(res.data.message);
        this.$router.go(0);
      }).catch(err=>{
        alert(err.message);
      });
    },
    // 结算
    clearing() {
      this.$router.push({path:"/account",query:{data:JSON.stringify(this.multipleSelection)} });
    },

 
  },
};
</script>

<style>
table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,
td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  width: 210px;
  text-align: center;
}
td {
  height: 80px;
}
th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
</style>